<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>
    <script src="/libs/babel.min.js"></script>
    <style>
      .redColor {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const title = "title";
      const data = "Hello,ReacT";
      const VDOM = (
        <h1 className="redColor" id={title}>
          <span style={{ color: "orange" }}>{data.toUpperCase()}</span>
        </h1>
      );

      ReactDOM.render(VDOM, document.getElementById("root"));
    </script>
  </body>
</html>
